<template>
  <div class="about">
      <h1>{{list}}</h1>
      <h1>{{num}}</h1>
      <h1>{{person}}</h1>
      <h1>{{person.name}}</h1>
       <h2>{{hh}}</h2>
       <h2>薪水是{{sala}}</h2>
       <h1>{{total}}</h1>
       <h1>花了{{getTotal}}元</h1>
       <button @click="add">电脑数量++</button>
       <button @click="handle">调用vuex方法</button>
       <button @click="go">跳转</button>
       <button @click="router.go(-1)">返回</button>
  </div>
</template>
<script>
import {reactive,toRefs,toRef,computed,getCurrentInstance} from 'vue'
import {useStore} from 'vuex'
import {useRouter,useRoute} from 'vue-router'

export default {
    setup(props) {
        const data = reactive({
            list:[1,2,3,4,5],
            num:10,
            resList:[{title:'电脑',price:99,num:2},{title:'手机',price:199,num:3}],
            person:{
                name:'张三',
                age:18,
                job:{
                    salary:10000
                }
            }
        })
        console.log(toRefs(data));
        console.log(data.list);

        const total = computed(()=>{
            return '我是vue3的计算属性'
        })
        const getTotal = computed(()=>{
            let sum=0
            data.resList.forEach(item=>{
                 sum+=item.price*item.num
            })
            return sum
            
            
        })
        const add = ()=>{
            data.resList[0].num++
        }

        // store的使用

    //    解构赋值  把useStore() 对象中的 属性和方法解构出来
    console.log(useStore());
        const {state,commit} = useStore()
        console.log(state.list);
        console.log(state.msg);

        const handle = ()=>{
           commit('handle')
        }


        const router = useRouter()
        console.log(router);
        const go = ()=>{
        //    router.push('/')
         router.push({path:'/',query:{num:10}})
        }

        const {proxy} = getCurrentInstance()
        console.log(proxy.$aa());
       proxy.$axios.get('data.json').then(res=>{
        console.log(res);
       })
    //    属性名： toRef(你要展开的对象,对象中的属性)
        return {...toRefs(data),hh:toRef(data.person,'name'),sala:toRef(data.person.job,'salary'),total,getTotal,add,handle,router,go}
    }
}
</script>
